<template>
	<div class="company-unbound-container">
		<van-nav-bar title="企业解绑" left-text="返回" left-arrow @click-left="$router.back()" />

		<van-cell-group v-if="userInfo && userInfo.omDepts">
			<!-- 单位名称 -->
			<van-field v-model="userInfo.omDepts.pollutionSourceName" label="单位名称" readonly input-align="right" />

			<!-- 单位地址 -->
			<van-field v-model="userInfo.omDepts.address" label="单位地址" readonly input-align="right" />

			<!-- 负责人 -->
			<van-field v-model="userInfo.omDepts.linkman" label="负责人" readonly input-align="right" />

			<!-- 负责人电话 -->
			<van-field v-model="userInfo.omDepts.linkmanPhone" label="负责人电话" readonly input-align="right" />
		</van-cell-group>

		<!-- 加载状态 -->
		<van-loading v-if="loading" class="loading-container" type="spinner" size="24px"> 加载中... </van-loading>

		<!-- 空状态 -->
		<van-empty v-if="!loading && (!userInfo || !userInfo.omDepts)" description="暂无绑定企业信息" />

		<!-- 解绑按钮 -->
		<div v-if="userInfo && userInfo.omDepts" class="submit-section">
			<van-button type="danger" block :loading="submitting" @click="handleSubmit"> 解 绑 </van-button>
		</div>

		<!-- 解绑成功遮罩层 -->
		<div v-if="showSuccessMask" class="success-mask">
			<div class="success-content">
				<van-icon name="success" size="60" color="#07c160" />
				<div class="success-title">您已解绑成功</div>
				<div class="success-tip">请重新绑定企业后继续使用</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { post } from '@/api/request'
import { useUserStore } from '@/stores/user'
import { useCacheStore } from '@/stores/cache'

export default {
	name: 'CompanyUnbound',
	setup() {
		const router = useRouter()
		const userStore = useUserStore()
		const cacheStore = useCacheStore()

		const loading = ref(false)
		const submitting = ref(false)
		const userInfo = ref(null)
		const showSuccessMask = ref(false)

		// 初始化数据
		const initData = async () => {
			try {
				loading.value = true

				// 确保用户已登录
				await userStore.ensureLogin()

				// 获取用户信息
				if (userStore.userInfo) {
					userInfo.value = userStore.userInfo
				} else {
					showToast('获取用户信息失败')
				}
				console.log('userInfo.value:', userInfo.value)
			} catch (error) {
				console.error('初始化数据失败:', error)
				showToast('获取用户信息失败')
			} finally {
				loading.value = false
			}
		}

		// 处理解绑
		const handleSubmit = async () => {
			if (!userInfo.value || !userInfo.value.omDepts) {
				showToast('未找到绑定的企业信息')
				return
			}

			try {
				// 确认对话框
				await showConfirmDialog({
					title: '确认解绑',
					message: `确定要解绑企业「${userInfo.value.omDepts.pollutionSourceName}」吗？`,
					confirmButtonColor: '#ee0a24',
				})

				submitting.value = true

				const res = await post('/api/user/relieveYwdw', {
					yhid: userInfo.value.userId,
					ywdwId: userInfo.value.omDepts.id,
				})

				if (res.code === '0') {
					// 显示解绑成功遮罩层
					showSuccessMask.value = true

					// 清除用户的企业绑定信息（不清除登录状态）
					if (userInfo.value && userInfo.value.omDepts) {
						userInfo.value.omDepts = null
					}

					// 更新 userStore 中的用户信息
					if (userStore.userInfo) {
						userStore.userInfo.omDepts = null
					}
				} else {
					showToast({
						type: 'fail',
						message: res.msg || '解绑失败',
					})
				}
			} catch (error) {
				if (error !== 'cancel') {
					console.error('解绑失败:', error)
					showToast({
						type: 'fail',
						message: '解绑失败，请重试',
					})
				}
			} finally {
				submitting.value = false
			}
		}

		// 组件挂载时初始化
		onMounted(() => {
			initData()
		})

		return {
			loading,
			submitting,
			userInfo,
			showSuccessMask,
			handleSubmit,
		}
	},
}
</script>

<style lang="less" scoped>
.company-unbound-container {
	min-height: 100vh;
	background-color: #f7f8fa;

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200px;
	}

	.submit-section {
		margin: 16px;
	}
}

:deep(.van-cell-group) {
	margin: 0;
}

:deep(.van-field__label) {
	width: 100px;
}

// 解绑成功遮罩层
.success-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	// 禁止点击关闭
	pointer-events: auto;
}

.success-content {
	background: #fff;
	border-radius: 16px;
	padding: 40px 32px;
	text-align: center;
	min-width: 280px;
	max-width: 90%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

	.van-icon {
		margin-bottom: 20px;
		animation: scaleIn 0.3s ease;
	}

	.success-title {
		font-size: 20px;
		font-weight: 600;
		color: #323233;
		margin-bottom: 12px;
	}

	.success-tip {
		font-size: 14px;
		color: #646566;
		line-height: 1.5;
	}
}

@keyframes scaleIn {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
</style>
